<template>
  <div class="home-content">

    <div>
      <el-button>全部取消选择</el-button>
      <el-button @click="dialogVisible = true">增加商品</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="添加商品">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formWidth">
          <el-input v-model="form.productName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="价格" :label-width="formWidth">
          <el-input v-model="form.price" autocomplete="off" />
        </el-form-item>
        <el-form-item label="类型" :label-width="formWidth">
          <el-input v-model="form.typeId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="库存量" :label-width="formWidth">
          <el-input v-model="form.stock" autocomplete="off" />
        </el-form-item>
        <el-form-item label="警戒线" :label-width="formWidth">
          <el-input v-model="form.warningLine" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addGood">
          添加
        </el-button>
      </span>
      </template>
    </el-dialog>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="productId" label="商品编号" width="120" />
      <el-table-column property="productName" label="商品名称" width="120" />
      <el-table-column property="price" label="价格" width="120" />
      <el-table-column property="stock" label="库存量" width="120" />
      <el-table-column property="warningLine" label="警戒线" show-overflow-tooltip />
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button text @click="modify(scope.row)">
            修改
          </el-button>

          <el-dialog v-model="dialogFormVisible" title="修改商品信息" class="dialogbox" append-to-body="true">
            <el-form :model="formData" label-width="120px">
              <el-form-item label="名称">
                <el-input v-model="formData.productName" />
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="formData.price" />
              </el-form-item>
              <el-form-item label="警戒线">
                <el-input v-model="formData.warningLine" />
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                  确认修改
                </el-button>
              </span>
            </template>
          </el-dialog>
          <el-button
            size="small"
            type="danger"
            @click.prevent="handleDelete(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'GoodsList',
  setup () {
    const tableData = ref([])
    const dialogVisible = ref(false)
    const formWidth = '140px'
    const form = reactive({
      productName: '',
      price: '',
      typeId: '',
      stock: '',
      warningLine: ''
    })
    const dialogFormVisible = ref(false)
    const formData = reactive({
      productId: '',
      productName: '',
      price: '',
      warningLine: ''
    })
    const formLabelWidth = '140px'
    const getGoodsData = async () => {
      const result = await axios.get('http://localhost:8080/api/product/list')
      tableData.value = result.data.data
      console.log(result.data.data)
    }
    const handleDelete = (index, row) => {
      // /api/product/{productId}
      const result = axios.delete(`http://localhost:8080/api/product/${tableData.value[index].productId}`)
      console.log(result.data)
      // console.log('index' + index)
      // console.log(tableData.value[index])
      tableData.value.splice(index, 1)
      // console.log('row' + row)
      ElMessage({
        message: '删除成功！',
        type: 'success'
      })
    }
    getGoodsData()
    const addGood = async () => {
      if (form.productName.trim() === '' || form.price.trim() === '' || form.typeId.trim() === '' || form.stock.trim() === '' || form.warningLine.trim() === '') {
        ElMessage('请填写完整信息')
        return
      }
      const result = await axios.post('http://localhost:8080/api/product/save', form)
      console.log(result.data.data)
      ElMessage({
        message: form.productName + '添加成功！',
        type: 'success'
      })
    }
    // 修改商品
    const modify = async (row) => {
      console.log(row.productId)
      dialogFormVisible.value = true
      formData.productId = row.productId
    }
    const confirmModify = async () => {
      console.log('即将修改第' + formData.productId + '行')
      const result = await axios.post('http://localhost:8080/api/product/update', {
        productId: formData.productId,
        productName: formData.productName,
        price: formData.price,
        warningLine: formData.warningLine
      })
      console.log(formData)
      console.log(result.data.data)
    }
    return {
      tableData,
      dialogFormVisible,
      formData,
      formLabelWidth,
      handleDelete,
      dialogVisible,
      formWidth,
      form,
      addGood,
      modify,
      confirmModify
    }
  }
}
</script>
<style lang="scss">
  .list-title {
    display: flex;
    li {
      list-style: none;
      margin-right: 20px;
    }
  }
  .el-overlay {
    background-color: rgba(255, 255, 255, 0);
  }
</style>
